// AJAX作用：
// * 异步的 JS 和 XML
// * 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据(网页内容发生更改不刷新网页)


const box = document.getElementsByTagName('div')[0]
const btn = document.getElementsByTagName('button')
let xhr
// 是否正在发送请求的标识
let isSending=false
// 当键盘按下到按钮上时发送POST请求
btn[0].addEventListener('click',()=>{
    if (isSending){
        xhr.abort()//如果isSending为True就取消上一次发送的请求
    }
    // 1.创建对象
    xhr = new XMLHttpRequest();
    //当对象创建完成后就将标识修改为true
    isSending=true
    //自动将String类型转换为JSON格式
    xhr.responseType='json'
    //超时设置
    xhr.timeout=2000;
    //超时回调
    xhr.ontimeout=()=>{
        alert('网络异常!请稍后再试!!')
    }
    //网络异常回调
    xhr.onerror=()=>{
        alert('你的网络似乎出现了一些问题!')
    }
    // 2.初始化  设置请求方法和url    Time='+Date.now() --- 表示用来去除IE缓存(随机数即可)
    xhr.open('GET','http://127.0.0.1:9000/?Time='+Date.now());
    //设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    // 3.发送POST请求 发送请求体  在send中设置参数
    xhr.send('username=admin&password=admin');
    // 4.事件绑定，处理服务端返回的结果
    // onreadystatechange拆分解释：
    //    on ---- when 当····时候
    //    readystate ---- 是xhr对象中的属性，表示状态 0 1 2 3 4(1 -- open方法提交完毕、2 -- send方法提交完毕、3 -- 服务端返回部分的结果、4 -- 服务端返回的全部结果)
    //    change ---- 在改变的时候触发
    xhr.onreadystatechange=()=>{
        //如果服务端返回了所以结果
        if (xhr.readyState===4){
            //请求发送成功将标识修改为false - 标识未发生请求
            //如果响应状态码为200-300
            //      2XX -- 成功
            if (xhr.status>=200&&xhr.status<300){
                box.innerHTML=xhr.response.name
            }
        }
    }
    //取消请求abort()
    btn[1].addEventListener('click',()=>{
        xhr.abort();
    })
})